<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="工单授权" @ok="handleSubmit" width="1200px">
    <!--工单授权部分-->
    <template v-for="(item, index) of processTypeDictOptions">
      <a-card :title="item.text" :style="{ marginTop: index == 0 ? '0px' : '12px', height: 'auto' }" :headStyle="{ backgroundColor: '#eaeaea' }">
        <a-checkbox-group @change="designNameChange" v-model:value="designNameValue[index]" style="width: 100%">
          <a-row>
            <template v-for="des in designNameOption">
              <a-col :span="6" v-if="des.procType == item.value">
                <a-checkbox :value="des.value">{{ des.text }}</a-checkbox>
              </a-col>
            </template>
          </a-row>
        </a-checkbox-group>
      </a-card>
    </template>
    <!--树操作部分-->
    <template #insertFooter>
      <a-dropdown placement="topCenter">
        <template #overlay>
          <a-menu>
            <a-menu-item key="1" @click="checkALL">全部勾选</a-menu-item>
            <a-menu-item key="2" @click="cancelCheckALL">取消全选</a-menu-item>
          </a-menu>
        </template>
        <a-button style="float: left"> 树操作 <Icon icon="i-ant-design:up-outlined" /> </a-button>
      </a-dropdown>
    </template>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, computed, unref } from "vue"
  import { BasicModal, useModalInner } from "/@/components/Modal"
  import { getParentDesignList, getRoleDegisnList, saveRoleDesign } from "/@/api/sys/role"
  import { initDictOptions } from "/@/utils/dict/index"
  import { Icon } from "/@/components/Icon"

  // 声明Emits
  const emit = defineEmits(["success", "register"])
  //角色id
  const roleId = ref("")
  //原始工单id
  const oldDesignId = ref("")
  //新工单id
  const newDesignId = ref("")
  //工单字典类型
  const processTypeDict = ref([])
  //工单字典类型项
  const processTypeDictOptions = ref([])
  //工单集合
  const desformList = ref([])
  //工单名称集合
  const designNameOption = ref([])
  //工单数据集合
  const designNameValue = ref([])
  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false })
    roleId.value = data.roleId
    //初始化数据
    initData()
  })

  /**
   * 初始化数据
   */
  async function initData() {
    //获取字典配置
    let dictRes = await initDictOptions("bpm_process_type")
    if (dictRes) {
      processTypeDict.value = dictRes
    }
    //获取表单设计信息
    let designList = await getParentDesignList()
    if (designList) {
      desformList.value = designList
      //获取指定属性的数据集合
      let procTypeArr = [...new Set(Array.from(unref(designList), ({ procType }) => procType))]
      //工单类型字典项
      processTypeDictOptions.value = processTypeDict.value.filter((item) => procTypeArr.indexOf(item.value) != -1)
      //工单名称集合
      designNameOption.value = designList.map((design) => {
        return { value: design.id, text: design.desformName, procType: design.procType }
      })
    }
    //获取角色表单信息
    let roleDegisnList = await getRoleDegisnList({ roleId: unref(roleId) })
    if (roleDegisnList.length > 0) {
      let { designName, designValues } = selectedDesign(roleDegisnList)
      oldDesignId.value = designName.join(",")
      newDesignId.value = designName.join(",")
      designNameValue.value = designValues
    }
  }
  /**
   * 点击修改
   */
  function designNameChange(selectedValue) {
    newDesignId.value = unref(designNameValue).join(",")
  }
  /**
   * 全选
   */
  function checkALL() {
    let { designName, designValues } = selectedDesign(unref(desformList))
    designNameValue.value = designValues
    newDesignId.value = designName.join(",")
  }
  /**
   * 取消全选
   */
  function cancelCheckALL() {
    designNameValue.value = []
    newDesignId.value = ""
  }
  /**
   * 选中工单信息
   */
  function selectedDesign(selectedList) {
    let designName = []
    let designValues = []
    for (let option of unref(processTypeDictOptions)) {
      let values = []
      for (let value of selectedList) {
        if (option.value == value.procType) {
          designName.push(value.id)
          values.push(value.id)
        }
      }
      designValues.push(values)
    }
    return { designName, designValues }
  }
  /**
   * 提交事件
   */
  async function handleSubmit() {
    try {
      setModalProps({ confirmLoading: true })
      //提交表单
      await saveRoleDesign({ roleId: unref(roleId), newDesignId: unref(newDesignId), oldDessignId: unref(oldDesignId) })
      //关闭弹窗
      closeModal()
      //刷新列表
      emit("success")
    } finally {
      setModalProps({ confirmLoading: false })
    }
  }
</script>
